<!DOCTYPE html>
<html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>添加商品</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <link rel="stylesheet" href="/css/item-edit.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form" lay-filter="formItem">
    <div class="layui-form-item">
        <label class="layui-form-label required">商品类目</label>
        <div class="layui-input-block">
            <input id="pointLabelGroup" name="cid"  type="hidden" class="layui-input" />
            <input id="pointLabelName" name="cidName" placeholder="请选择商品类目" type="text" class="layui-input" lay-verify="required" required/>
        </div>
        <div class="showChooseDiv" style="display: none;  padding: 20px">
            <div id="dept_main" style="margin-right: 2%;">
                <div id="dept_tree"></div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">商品标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="required" lay-reqtext="商品价格不能为空" placeholder="请输入商品价格" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">商品卖点</label>
        <div class="layui-input-block">
            <textarea name="sellPoint" class="layui-textarea" placeholder="请输入商品卖点信息"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">商品价格</label>
        <div class="layui-input-block">
            <input type="text" name="priceView" lay-verify="required" lay-reqtext="商品价格不能为空" placeholder="￥" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">库存数量</label>
        <div class="layui-input-block">
            <input type="text" name="num" lay-verify="required" lay-reqtext="库存数量不能为空" placeholder="请输入库存数量" value=""class="layui-input">
            <input type="hidden" name="price"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">条形码</label>
        <div class="layui-input-block">
            <input type="text" name="barcode" placeholder="请输入条形码" value="" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品图片</label>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="fileBtn">多图片上传</button>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;margin-left: 11.5%;">
                预览图：
                <div class="layui-upload-list" id="file" ></div>
                <input type="hidden" lay-filter="file" id="image" name="image"/>
            </blockquote>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品描述</label>
        <div class="layui-input-block">
            <textarea class="layui-textarea" name="itemDesc" id="itemDesc" style="display: none">
                请在这里输入商品描述
            </textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
</div>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script type="text/javascript"  th:inline="none">
    layui.use(['form', 'tree', 'upload', 'layedit'], function () {
        var form = layui.form,
            layer = layui.layer,
            tree = layui.tree,
            upload = layui.upload,
            layedit = layui.layedit,
            $ = layui.$;
        var itemEditEditor;

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var itemDesc=layedit.getContent(itemEditEditor);
            var pageData = data.field;
            var param ={
                cid: pageData.cid,
                title: pageData.title,
                sellPoint: pageData.sellPoint,
                priceView: pageData.priceView,
                price: pageData.priceView*100,
                num: pageData.num,
                barcode: pageData.barcode,
                image: pageData.image,
                itemDesc: itemDesc
            };
            $.post("/item/save",param, function(data){
                if(data.status == 200){
                   layer.alert('新增商品成功!');
                    window.parent.location.reload();
                }else{
                    layer.alert("新增商品失败!");
                }
            });
        });

        //监听商品类目
        $("#pointLabelName").click(function(){
            layer.open({
                type: 1,
                title: "选择",
                area: ['28%', '60%'],
                content: $(".showChooseDiv"),
                maxmin: false,
                shadeClose: true,
                shade: false,
            });
        });
        function getData(){
            var data = [];
            $.ajax({
                url : '/item/cat/list',//后台数据请求地址
                type : 'post',
                async : false,
                success: function(resut){
                    data = resut;
                }
            });
            return data;
        }
        var jsonData = JSON.parse(JSON.stringify(getData()));
        var formatData = [];
        for(var item in jsonData){
            if(jsonData[item].pid === 0){
                var tempObject = {};
                tempObject.title = jsonData[item].name;
                tempObject.id = jsonData[item].id;
                tempObject.children = getChildren(tempObject.id);
                formatData.push(tempObject);
            }
        }
        function getChildren(id){    //递归体  即对每条data逐条递归找children
            var tempArray = [];
            for(var i in jsonData){
                if(jsonData[i].pid === id){
                    var tempChild = {};
                    tempChild.title = jsonData[i].name;
                    tempChild.id = jsonData[i].id;
                    if(selectChildren(jsonData[i].id)){   //若存在子节点，继续递归；否则为叶节点，停止递归
                        tempChild.children = getChildren(jsonData[i].id);
                    }
                    tempArray.push(tempChild);
                }
            }
            return tempArray;
        }
        function selectChildren(id){   // 是否存在子节点
            for(var i in jsonData){
                if(jsonData[i].pid === id){
                    return true;
                }
            }
            return false;
        }
        tree.render({
            elem: '#dept_tree',
            data: formatData,
            id: 'treeId', //标识
            showCheckbox: false, //是否显示复选框
            onlyIconControl: true,
            click: function (obj) {
                $("[name='cid']").val(obj.data.id);
                $("[name='cidName']").val(obj.data.title);
                layer.close(layer.index);
            }
        });

        //多图片上传
        upload.render({
            elem: '#fileBtn'
            ,url: '/pic/upload' //改成您自己的上传接口
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#file').append('<img src="'+ result +'" width="160" height="160" alt="'+ file.name +'" class="alayui-upload-img">')
                });
            }
            ,done: function(res){
                let formData = form.val("formItem");
                let val ="";
                if (formData.image){
                    val = formData.image + ',' +  res.url;
                } else {
                    val = val + res.url;
                }
                $("#image").val(val);
            }
        });

        //商品描述-编辑器
        //构建一个默认的编辑器
        itemEditEditor = layedit.build('itemDesc');
        //编辑器外部操作
        var active = {
            content: function(){
                return layedit.getContent(itemEditEditor);//获取编辑器内容
            }
            ,text: function(){
                return layedit.getText(itemEditEditor); //获取编辑器纯文本内容
            }
            ,selection: function(){
                return layedit.getSelection(itemEditEditor);
            }
        };
        $('.site-demo-layedit').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //自定义工具栏
        layedit.build('LAY_demo2', {
            tool: ['face', 'link', 'unlink', '|', 'left', 'center', 'right']
            ,height: 100
        });

    });
</script>
</body>
</html>